<template>
    <div>

        <div>
            <a-button style="color:#E2231A;margin:20px" @click="dataChange">{{simple===true?'详细':'简化'}}</a-button>

            <span class="total-integral">
                当前积分：{{integral}}
            </span>
        </div>
        <div style="height: 700px;overflow: auto;padding: 10px">
            <a-timeline>
                <a-timeline-item v-for="action in simple?simpleData:data" :color="action.freeze===true?'gray':action.incr?'green':'red'">
                    <p class="action-time">{{moment(action.createTime).format("YYYY-MM-DD HH:mm:ss")}}</p>
                    <span color="orange" style="margin-left: 5px">
                    {{action.type===1?'下单使用':action.type===2?'下单赠送（冻结中）':action.type===3?'订单取消返回积分':action.type===4?'订单取消，清除冻结积分':action.type===5?'订单入账':action.type===6?'付款冻结积分清除':''}}
                </span>

                    <span :style="{color:action.freeze?'gray':action.incr?'#05a805':'red',marginLeft:'8px'}">{{action.incr?'+':'-'}}{{action.num}}</span>
                    <a-tag v-if="action.freeze===true" color="gray" style="margin-left: 50px">冻结</a-tag>
                    <p class="action-time" style="margin:5px">订单编号：{{action.relatedId}}</p>
                </a-timeline-item>


            </a-timeline>
        </div>
    </div>
</template>

<script>
    import userApi from "../../../api/user/userApi";
    import integralActionApi from "../../../api/info/integralActionApi";

    import moment from 'moment-timezone'

    export default {
        name: "MyIntegral",
        data() {
            return {
                simple: false,
                data: [],
                simpleData: [],
                integral: 0//用户总积分
            }
        },
        created() {
            this.fetchData();
        },
        methods: {
            moment,
            fetchData() {
                integralActionApi.userActionData().then(resp => {
                    if (resp.data.flag) {
                        let data = resp.data.data;
                        this.data = data;
                        userApi.queryIntegral(this.$store.state.user.user.id).then(Resp => {
                            if (Resp.data.flag) {
                                this.integral = Resp.data.data
                            }
                        })
                        console.log(this.data)
                    }
                })
            },
            dataChange() {
                this.simple = !this.simple
                console.log(this.simpleData)
                if (this.simpleData.length <= 0) {
                    this.simpleData = this.data.filter(action => action.freeze === false)
                }
            }
        }
    }
</script>

<style scoped>

    .action-time {
        font-size: 12px;
        color: #999999;
    }

    .total-integral {
        font-size: 20px;
        color: #f66900;
        font-weight: 700;
    }
</style>